<template>
  <el-form :model="registry" class="w-50 mx-auto mt-5">
    <el-form-item>
      <img src="@/assets/logo.png" class="mx-auto" style="width: 5rem" />
    </el-form-item>
    <el-form-item>
      <div class="fs-1 mx-auto">注册</div>
    </el-form-item>
    <el-form-item>
   <el-row  class="mx-auto w-75">
      <el-col :span="6" class="text-end">
        <span>用户名: </span>
      </el-col>
      <el-col :span="18">
        <el-input
          v-model="registry.userName"
          class="w-75 mx-auto"
          placeholder="用户名"
        ></el-input>
    
      </el-col>
   </el-row>
    </el-form-item>
    <el-form-item>
     <el-row  class="mx-auto w-75">
      <el-col :span="6" class="text-end">
        <span>密码: </span>
        </el-col>
        <el-col :span="18"> 
        <el-input
          v-model="registry.userPassword"
          class="w-75 mx-auto"
          placeholder="密码"
        ></el-input>
      </el-col>
     </el-row>
    </el-form-item>
    <el-form-item>
      <el-row  class="mx-auto w-75">
      <el-col :span="6" class="text-end">
        <span>邮箱:</span>
      </el-col>
      <el-col :span="18">
        <el-input
          v-model="registry.userEmail"
          class="w-75 mx-auto"
          placeholder="请输入邮箱地址"
        ></el-input>
      </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-row class="mx-auto w-75">
        <el-col :span="6" class="text-end">
          <span>性别：</span>
        </el-col>
        <el-col :span="18">
          <el-radio v-model="registry.userSex" label="男">男</el-radio>
          <el-radio v-model="registry.userSex" label="女">女</el-radio>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="mx-auto" @click="registryAction"
        >注册</el-button
      >
    </el-form-item>
    <el-form-item>
      <div class="mx-auto">
        <router-link to="/login">登录</router-link>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "RegistryFrame",
  data() {
    return {
      registry: {
        userName: null,
        
        userPassword: null,
        userEmil: null,
        userSex: null,
      },
    };
  },

  methods: {
    registryAction() {
      if (this.registry.password == this.registry.confirmPass) {
        this.$axios.post("/api/registry", this.registry).then((response) => {
          let data = response.data;
          if (data.code == 200) {
            alert(data.msg);
            this.$router.push("/login");
          } else {
            alert(data.msg);
          }
        });
      } else {
        alert("两次密码输入不一致");
      }
    },
  },
};
</script>

<style>
</style>